<template>
	<div>
		<!-- 轮播图区域 ,绑定数组传递给子组件,:isfull="true"是给父组件传递信息：宽度为100%-->
		<swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
		<!-- 把mui的九宫格改造成六宫格 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/newslist">
					<!-- 如果有图片就可以把span替换成img -->
					<span class="mui-icon mui-icon-home"></span>
					<div class="mui-media-body">新闻资讯</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/photolist">
					<span class="mui-icon mui-icon-email"></span>
					<div class="mui-media-body">图片分享</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/goodslist">
					<span class="mui-icon mui-icon-chatbubble"></span>
					<div class="mui-media-body">商品购买</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<span class="mui-icon mui-icon-location"></span>
					<div class="mui-media-body">留言反馈</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<span class="mui-icon mui-icon-search"></span>
					<div class="mui-media-body">视频专区</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<span class="mui-icon mui-icon-phone"></span>
					<div class="mui-media-body">Phone</div></a></li>
		</ul> 
		
	</div>
</template>

<script>
	import swiper from '../subcomponents/swiper.vue'
	export default{
		data(){
			return{
				lunbotuList:[]   //保存轮播图数据
			}
		},
		created(){
			this.getlunbo();
		},
		methods:{
			getlunbo:function(){
				// 使用自己制作的api接口获取轮播图数据
				this.axios.get('http://localhost:3000/api/getLunbotu')
				.then( (response)=>{
					// this.lunbotuList=response.data.data;
					console.log(this.lunbotuList);
					for(var i=0;i<response.data.data.length;i++){
						this.lunbotuList.push({url:response.data.data[i].url,img:response.data.data[i].img})
					}
					console.log(this.lunbotuList);

				})
			}
		},
		components:{
			swiper:swiper
		}
	}
</script>

<style scoped lang="scss">
	
	.mui-col-sm-3{
		width: 33.3%;
	}
	.mui-grid-view.mui-grid-9{
		background-color: #fff;
		border: none;
		// 如果有图片的话
		// img{
		// 	width: 60px;
		// 	height: 60px;
		// }
	}
	.mui-grid-view.mui-grid-9.mui-table-view-cell{
		border: none;
	}
</style>
